<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<meta name="Author" content="Tencent.AlloyTeam" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no,target-densitydpi=medium-dpi" />

	<link rel="stylesheet" type="text/css" href="css/mui-base.css" />
	<link rel="stylesheet" type="text/css" href="css/mui-list.css" />
	<style type="text/css">
		.container{
			padding: 10px;
		}
	
	</style>
</head>

<div class="container">

	<h4 style="margin-bottom:30px;">Auto Load List</h4>
	<ul id="auto_grow_list" class="list list_white conner_round_vertical_group">
		<li class="list_item">
			<a  class="list_text">ListItemA</a>
		</li>
		<li class="list_item">
			<a  class="list_text">ListItemB</a>
		</li>
		<li class="list_item">
			<a  class="list_text">ListItemC</a>
		</li>
		<li class="list_item">
			<a  class="list_text">ListItemC</a>
		</li>
		<li class="list_item">
			<a  class="list_text">ListItemC</a>
		</li>
		<li class="list_item">
			<a  class="list_text">ListItemA</a>
		</li>
		<li class="list_item">
			<a  class="list_text">ListItemB</a>
		</li>
		<li class="list_item">
			<a  class="list_text">ListItemC</a>
		</li>
		<li class="list_item">
			<a  class="list_text">ListItemC</a>
		</li>
		<li class="list_item">
			<a  class="list_text">ListItemC</a>
		</li>
		<li class="list_item">
			<a  class="list_text">ListItemA</a>
		</li>
		<li class="list_item">
			<a  class="list_text">ListItemB</a>
		</li>
		<li class="list_item">
			<a  class="list_text">ListItemC</a>
		</li>
		<li class="list_item">
			<a  class="list_text">ListItemC</a>
		</li>
		<li class="list_item">
			<a  class="list_text">ListItemC</a>
		</li>
		<li class="list_item">
			<a  class="list_text">ListItemA</a>
		</li>
		<li class="list_item">
			<a  class="list_text">ListItemB</a>
		</li>
		<li class="list_item">
			<a  class="list_text">ListItemC</a>
		</li>
		<li class="list_item">
			<a  class="list_text">ListItemC</a>
		</li>
		<li class="list_item">
			<a  class="list_text">ListItemC</a>
		</li>
		<li class="list_item">
			<a  class="list_text">ListItemA</a>
		</li>
		<li class="list_item">
			<a  class="list_text">ListItemB</a>
		</li>
		<li class="list_item">
			<a  class="list_text">ListItemC</a>
		</li>
		<li class="list_item">
			<a  class="list_text">ListItemC</a>
		</li>
		<li class="list_item">
			<a  class="list_text">ListItemC</a>
		</li>
		<li class="list_item">
			<a  class="list_text">ListItemA</a>
		</li>
		<li class="list_item">
			<a  class="list_text">ListItemB</a>
		</li>
		<li class="list_item">
			<a  class="list_text">ListItemC</a>
		</li>
		<li class="list_item">
			<a  class="list_text">ListItemC</a>
		</li>
		<li class="list_item">
			<a  class="list_text">ListItemC</a>
		</li>
	</ul>

</div>
<script type="text/javascript" src="js/JM.js"></script>
<script type="text/javascript" src="js/list.js"></script>
<script type="text/javascript" src="js/autoload_list.js"></script>
<script type="text/javascript">

	var auto_grow_list = MUI.AutoLoadList({
		id:"auto_grow_list"
	});
	//模拟数据
	var loadedDataList =  auto_grow_list.elem.innerHTML;
	JM.event.on(auto_grow_list,"loadingData",function(){
		setTimeout(function(){
			//模拟数据
			auto_grow_list.hideLoadingTips();
			auto_grow_list.elem.innerHTML += loadedDataList;
			auto_grow_list.isLoading = false;
		},2000);
	});
</script>
</body>
</html>
